<style src="./subscription-detail.css"></style>

<template lang="html">
<div class="subscription-detail">
  <button class="btn btn-sm btn-primary" @click="showSubscriptionDialog">套餐累计订阅量</button>
  <modal
    :title="'套餐累计订阅量'"
    ok-text="提交"
    cancel-text="取消"
    effect="fade"
    :small="true"
    :width="460"
    :show.sync="showSubscriptionModal">
    <div slot="modal-body" class="modal-body">
      <table class="table table-bordered table-hover">
        <caption class="text-center">套餐累计订阅量（次）</caption>
        <thead>
          <tr>
            <th class="col-xs-2">套餐名称</th>
            <th class="col-xs-2">套餐订阅量（人）</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in details">
            <td class="col-sm-6">{{item.title}}</td>
            <td class="col-sm-6">{{item.times}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div slot="modal-footer" class="modal-footer">
    <button type="button" class="btn btn-primary" @click="showSubscriptionModal = false">确认</button>
  </div>
  </modal>
</div>
</template>

<script src="./subscription-detail.js"></script>
